<template>
  <div class="header">
    <div class="subTit">Smart Health Monitor</div>
    <div class="title">生命信息监测中心</div>
    <div class="flex justify-between items-center mt-[-20px] text-[#5E68A2] text-xl">
      <div class="flex tabList flex-row-reverse">
        <div :class="{ 'cursor-pointer': true, active: currentRoute === '/' }" @click="goPage('/')">
          全部设备
        </div>
      </div>
      <div class="flex tabList">
        <div class="item" @click="upload">重置</div>
        <div class="item" @click="jgSelectFn">机构选择</div>
        <div class="item" @click="searchFn">立即搜索</div>
        <div class="item" @click="dataDesensitization">数据脱敏</div>
        <div
          :class="{ item: true, active: currentRoute === '/dataStatistics' }"
          @click="goPage('dataStatistics')"
        >
          数据统计
        </div>
      </div>
    </div>
    <transition name="el-fade-in-linear">
      <div class="centerBox" v-if="isShow">
        <CommonCard title="机构选择">
          <template #content>
            <div class="w-[350px]">
              <el-select v-model="institution" placeholder="请选择" style="width: 100%">
                <el-option label="全部" :value="0" />
                <el-option
                  v-for="item in jgOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <div class="flex justify-between mt-3">
                <div
                  class="w-[48%] border border-[#5191f6] text-center py-2 cursor-pointer"
                  @click="cancelFn"
                >
                  取消
                </div>
                <div
                  class="w-[48%] bg-[#5191f6] text-center py-2 cursor-pointer"
                  @click="confirmFn"
                >
                  确认
                </div>
              </div>
            </div>
          </template>
        </CommonCard>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import CommonCard from '@/components/CommonCard.vue'
import { ref, watch } from 'vue'
import router from '../router/index'
import { useCommonStore } from '@/stores/common'
import { getInstitutionList } from '@/api/home'
const currentRoute = ref()
const isShow = ref(false)
const jgOptions = ref<any[]>([])
const cancelFn = () => {
  isShow.value = false
}
const institution = ref()
watch(
  () => router.currentRoute.value,
  async (toPath: any) => {
    console.log(toPath)
    sessionStorage.setItem('isQuery', toPath.query.institutionId || '')
    sessionStorage.setItem('institutionId', toPath.query.institutionId || '')
    useCommonStore().setInstitutionId(toPath.query.institutionId || '')
    currentRoute.value = toPath.path
  },
  { immediate: true, deep: true }
)
const goPage = (url: string) => {
  router.push(url)
}
const upload = () => {
  location.reload()
}
const confirmFn = () => {
  isShow.value = false
  if (institution.value === 0) {
    institution.value = ''
  }
  sessionStorage.setItem('institutionId', institution.value)
  useCommonStore().setInstitutionId(institution.value)
}
const dataDesensitization = () => {
  useCommonStore().setIsNameHide()
}
const searchFn = () => {
  useCommonStore().setIsSearchHide()
}

const jgSelectFn = async () => {
  if (sessionStorage.getItem('isQuery')) {
    return
  }
  const res: any = await getInstitutionList({ pageNum: 1, pageSize: 9999 })
  jgOptions.value = res.rows
  isShow.value = true
  institution.value = +(sessionStorage.getItem('institutionId') as string)
}
</script>

<style scoped lang="less">
.active {
  cursor: pointer;
  color: #5e68a2;
  line-height: 27px;
  background: linear-gradient(180deg, #ffffff 0%, #376af4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header {
  background: url(../assets/image/header.png) no-repeat;
  background-size: 100% 100%;
  padding: 10px 0;
  .subTit {
    font-size: 10px;
    font-family: DOUYU, DOUYU;
    font-weight: normal;
    color: #ffffff;
    line-height: 11px;
    letter-spacing: 25px;
    background: linear-gradient(180deg, #e5efff 0%, #becdf4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
  }
  .title {
    margin-top: 10px;
    font-size: 24px;
    font-family: DOUYU, DOUYU;
    font-weight: normal;
    color: #ffffff;
    line-height: 38px;
    letter-spacing: 10px;
    background: linear-gradient(180deg, #e5efff 0%, #becdf4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
  }
  .tabList {
    padding: 0 30px;
    font-family: AlibabaPuHuiTiM;
    .item {
      margin-left: 30px;
      cursor: pointer;
      user-select: none;
    }
  }
}
.centerBox {
  background: #08102b;
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
</style>
